<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center"></view>
        <view class="colse" @click="close">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <view class="scrollView">
          <view class="stroeInfo ">
            <image :src="dataInfo.avatar?getImgUrl(dataInfo.avatar):'/static/logo.png'" mode="scaleToFill" />
            <view class="stroe-title">{{ dataInfo.name }}</view>
          </view>
          <view class="stroe-team">
            <view class="list flex-1 flex flex-align" @click="callPhone(dataInfo.phone)">
              <view class="flex flex-align flex-center icon">
                <uni-icons type="phone-filled" size="16" color="#fff"></uni-icons>
              </view>
              <view class="weben">电话：</view>
              <view class="titles">{{ dataInfo.phone||15200000000 }}</view>
            </view>
            <view class="list flex-1 flex flex-align" @click="copy(dataInfo.invite_code)">
              <view class="flex flex-align flex-center icon">
                <uni-icons type="redo-filled" size="16" color="#fff"></uni-icons>
              </view>
              <view class="weben">邀请码：</view>
              <view class="titles">{{ dataInfo.invite_code }}</view>
            </view>
           
          </view>
        </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { getImgUrl,callPhone, copy } from '@/utils/tools'
import { onMounted, ref } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: true
  },
  dataInfo: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}
function subMite(value: any) {
  emit('submit', value)
  close()
}
function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #fff;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 50rpx;
  .title{font-size: 32rpx;height:90rpx;}
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  .submite{
   height: 80rpx;background: #FE7431;color: #fff;font-size: 32rpx;font-weight: bold;border-radius: 80rpx;display: flex;justify-content: center;align-items: center;
    font-size: 26rpx;margin: 30rpx 30rpx 0;
  }
  .stroeInfo{text-align: center;padding: 60rpx 0 30rpx;
    image{width: 150rpx;height: 150rpx;border-radius: 100%;}
    .stroe-title{font-size: 30rpx;font-weight: bold;color: #323233;margin: 10rpx 0;}
  }
  .stroe-team{font-size: 28rpx;color: #646566;margin:20rpx 30rpx 30rpx;
    .list{width: 400rpx;margin: 0 auto 15rpx;}
    .icon{width: 46rpx;height: 46rpx;border-radius: 100%;background: #FE7431;margin-right: 10rpx;}
    .wenben{color: #323233;}
    .titles{color: #FE7431}
  }
}
</style>
